<template>
    <div class="body">
        <mt-cell :title="'SN:'+item.sn" v-for="(item,index) of printer_list" :key="index" is-link @click.native="setPrinter(item)">
            <!-- <mt-button type="danger" size="small">测试</mt-button> -->
            <div class="printer-status"><div class="printer-status-dian" :class="item.status == 1?'green':'red'"></div><span>{{item.status == 1?'已启用':'已禁用'}}</span></div>
        </mt-cell>
        <section class="login_message">
            <mt-button class="btn" @click="Printer">添加打印机</mt-button>
            <!-- <template v-else> -->
                <!-- <mt-button class="btn" @click="Printer">修改打印机</mt-button> -->
            <!-- </template> -->
        </section>
        <mt-popup
        v-model="popupVisible">
            <p class="title">添加打印机</p>
            <section class="login_message">
                <input type="text" placeholder="请选择打印机品牌" v-model="brand" readonly>
            </section>
            <section class="login_message">
                <input type="text" placeholder="请填写编号(SN)" v-model="sn">
            </section>
            <section class="login_message">
                <input type="text" placeholder="请填写密匙(KEY)" v-model="key">
            </section>
            <section class="is_open">
                <mt-cell title="启用打印机">
                    <mt-switch v-model="isOpen"></mt-switch>
                </mt-cell>
            </section>
            <p class="bottom">请查看打印机底部</p>
            <section class="login_message">
                <mt-button class="btn" @click="AddPrinter">设置</mt-button>
                <mt-button class="btn" @click="test">测试打印机</mt-button>
                <mt-button class="btn" @click="del">删除打印机</mt-button>
            </section>
        </mt-popup>
    </div>
</template>
<script>
import {addprinter,testPrinter,printerList,printerStatus,printerDel} from '../api'
import {Toast} from "mint-ui"
export default {
    data() {
        return {
            popupVisible:false,
            sn:"",
            key:"",
            brand:"飞鹅",
            isOpen:false,
            printer_list:[],
            isSet:false
        }
    },
    created(){
        this.getPrinterList();
    },
    methods:{
        del(){
            const data={
                token:this.$store.getters.token,
                sn:this.sn
            }
            printerDel(data).then(res=>{
                console.log(res);
                if(res.code == 200){
                    Toast("打印机删除成功");

                }else{
                    Toast('打印机删除失败');
                }
                this.popupVisible = !this.popupVisible
                this.getPrinterList();
            })
        },
        setPrinter(item){
            this.sn = item.sn;
            this.key = item.key;
            this.isOpen = item.status == 1?true:false;
            this.popupVisible = !this.popupVisible;
            this.isSet = true;
        },
        getPrinterList(){
            const data = {
                token:this.$store.getters.token
            }
            printerList(data).then(res=>{
                this.printer_list = res.data;
            })
        },
        test(){
                const data={
                    token:this.$store.getters.token,
                    sn:this.sn
                }
                testPrinter(data).then(res=>{
                    // console.log(res);
                    Toast(res.msg);
                })
            },
        Printer(){
            this.popupVisible = !this.popupVisible;
            this.sn = '';
            this.key = '';
            this.isOpen = true;
            this.isSet = false;
        },
        AddPrinter(){
            this.popupVisible = !this.popupVisible
            let data = {
                token:this.$store.getters.token,
                sn:this.sn,
                key:this.key,
                status:this.isOpen?1:2
            }
            if(!data.sn){
                Toast("请填写打印机编号(SN)")
                return;
            }else if(!data.key){
                Toast("请填写打印机密匙(KEY)")
                return;
            }
            if(this.isSet){
                printerStatus(data).then(res=>{
                    Toast(res.msg);
                    this.getPrinterList();
                })
            }else{
                addprinter(data).then(res=>{
                    // console.log(res);
                    Toast(res.msg);
                    this.getPrinterList();
                    this.$store.commit("PRINTER",{sn:data.sn,key:data.key})
                })
            }
        }
    }
}
</script>
<style scoped>
    .title{
        text-align: center;
        line-height: 3rem;
        font-size: 1.5rem;
    }
    .bottom{
        text-align: center;
        line-height: 2rem;
    }
    .mint-popup{
        border-radius: 10px;
        width: 90%;
    }
    .btn{
        background: #F0463C;
        color: #fff;
    }
    .body >>> .mint-cell-wrapper{
        border-bottom: 1px solid #ccc;
    }
    .printer-status{
        display: flex;
        align-items: center;
        height: 100%;
    }
    .printer-status-dian{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin: 0 4px;
        
    }
    .green{
        background: #32CD32;
        box-shadow:0 0 4px #32CD32;
    }
    .red{
        background: #F0463C;
        box-shadow:0 0 4px #F0463C;
    }
    .is_open{
        width: 85%;
        margin: auto;
    }
    .body >>> .is_open .mint-cell-wrapper{
        font-size: 0.8rem;
        border-width: 2px;
    }
</style>